<template>
  <div class="app-container">
    <el-form
      :inline="true"
      :model="formInline"
      size="mini"
      class="demo-form-inline"
    >
      <el-form-item label="审批人">
        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="formInline.region" placeholder="活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="eduTeacherList"
      border
      style="width: 100%"
      :cell-style="rowClass"
      :header-cell-style="headClass"
    >
      <el-table-column prop="id" label="ID" width="100"> </el-table-column>
      <el-table-column label="姓名" width="120">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>介绍: {{ scope.row.career }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="头像" width="120">
        <template slot-scope="scope">
          <div class="block">
            <img :src="scope.row.avatar" class="teacher-avatar" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="intro" label="简介" width="300"> </el-table-column>
      <el-table-column label="头衔" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.level == 1 ? "高级讲师" : "讲师" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.gmtCreate }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <el-pagination
      background
      class="pagination"
      :page-size="size"
      layout="prev, pager, next"
      :total="total"
      :current-page="current"
      @current-change="getTeacherList"
    >
    </el-pagination>
  </div>
</template>

<script>
import Teacher from "@/api/teacher/teacher";
// 默认导入
export default {
  components: {},
  // 定义初始变量
  data() {
    return {
      eduTeacherList: [],
      size: 5,
      current: 0,
      total: 0,
      eduTeacherParam: {},
      formInline: {
        user: "",
        region: "",
      },
    };
  },
  //   定义
  created() {
    this.getTeacherList();
  },
  methods: {
    // 查询讲师列表
    getTeacherList(current = 1) {
      this.current = current;
      Teacher.getList(this.size, this.current, this.eduTeacherParam)
        .then((response) => {
          console.log("请求讲师列表====>", response);
          this.eduTeacherList = response.data.teacherList.records;
          this.total = response.data.teacherList.total;
          this.current = response.data.teacherList.current;
          console.log(this.total);
        })
        .catch((error) => {
          console.log("请求讲师列表====>", error);
        });
    },
    // 编辑讲师信息
    handleEdit(index, row) {
      // 跳转到讲师编辑
      this.$router.push({ path: "/teacher/edit/" + row.id });
    },
    // 删除讲师信息
    handleDelete(index, row) {
      console.log("index--->", index);
      console.log("row--->", row);
      // 弹出提示框
      this.$confirm("此操作将永久删除该讲师记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Teacher.deleteTeacherById(row.id)
            .then((response) => {
              // 重新加载数据
              this.getTeacherList();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            })
            .catch((error) => {
              console.log("error===>", error);
              this.$message({
                type: "error",
                message: "删除失败!",
              });
            });
        })
        .catch(() => {});
    },
    onSubmit() {
      console.log("submit!");
    },
    // 弹出删除弹框
    toastDelete() {},
    // 表头样式设置
    headClass() {
      return "text-align: center;background:rgb(242,242,242);color:rgb(140,138,140)";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    },
  },
};
</script>

<style>
.pagination {
  margin: 10px;
}
.teacher-avatar {
  width: 50px;
  height: 50px;
  border-radius: 30px;
}
</style>